<template>
  <div name="模板管理" class="gl_contentBox gl_heightFull">
    <!-- 操作按钮 -->
    <el-row :gutter="20" class="gl_mb_15">
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="gotoAddTemplate()">新建模板</el-button>
      </el-col>
    </el-row>
    <!-- 筛选项 -->
    <filterBox :qo="qo" :type="'temp'" @queryList="queryList" />
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" class="gl_table_noBorder" :border="false" stripe size="mini">
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column prop="name" label="模板名称" align="center" />
      <el-table-column prop="type" label="模板类型" align="center">
        <template slot-scope="{row}">
          <div>{{ row.messageTemplateType.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creationTime" label="创建时间" align="center">
        <template slot-scope="{row}">
          <div>{{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="{row}">
          <div v-if="row.isEnabled"><i class="success_circle" />正常</div>
          <div v-else><i class="error_circle" />禁用</div>
        </template>
      </el-table-column>
      <el-table-column prop="operating" label="操作" align="center" width="200">
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="disableItem(row,$index)">{{ row.isEnabled ? '禁用' : '开启' }}</el-button>
          <el-button type="text" size="mini" @click="gotoAddTemplate(row)">编辑</el-button>
          <el-button type="text" size="mini" @click="deleteItem(row,$index)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="qo.Page"
        :page-size="qo.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import filterBox from './components/filterBox.vue';
import {
  api_GET_ClubMessageTemplate, // 获取模板列表
  api_PUT_ClubMessageTemplateIdEnableStatus, // 禁用启用模板
  api_DELETE_ClubMessageTemplateId // 删除模板
} from '@/extend/api/hallswaggerApi/app.js';

import { Api_GET_ClubMessageTemplateQO } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    filterBox
  },
  data () {
    return {
      qo: new Api_GET_ClubMessageTemplateQO(),
      tableData: [],
      loading: false,
      total: 0
    };
  },
  created() {
    this.qo.IsEnabled = null;
    this.qo.IncludeMessageTemplateType = true;
    this.qo.IncludeMessageTemplateStyle = true;
    this.getPageList();
  },
  methods: {
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.loading = true;
      api_GET_ClubMessageTemplate(this.qo).then(
        res => {
          if (res) {
            this.tableData = res.items;
            this.total = res.totalCount;
            this.loading = false;
          }
        },
        error => {
          this.loading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    queryList(obj) {
      this.qo = obj;
      this.getPageList();
    },
    // 禁用
    disableItem(row, index) {
      const _msg = row.isEnabled ? '禁用成功' : '启用成功';
      api_PUT_ClubMessageTemplateIdEnableStatus(row.id, { enable: !row.isEnabled }).then(
        () => {
          this.$message({
            message: _msg,
            type: 'success'
          });
          this.getPageList();
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 删除
    deleteItem(row, index) {
      this.$confirm(`您确定要删除${row.name}模板吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubMessageTemplateId(row.id).then(
            () => {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getPageList();
            },
            error => {
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            }
          );
        });
    },
    // 新建模板
    gotoAddTemplate(row) {
      const id = row ? row.id : '';
      this.$router.push({
        name: 'addTemplate',
        query: {
          id: id
        }
      });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.getPageList(currentPage);
    }
  }
};
</script>

<style scoped>
.h5_img {
  width: 300px;
  height: 420px;
  border-radius: 6px;
  cursor: pointer;
}
 /* swiper */
.swiper-container {
  width: 100%;
  height: 420px;
  border-radius: 6px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 420px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
}
.h5_swiper {
  height: 420px;
}
.img_style {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.no_tag {
  padding-left: 15px;
  color: #C0C4CC;
  font-size: 12px;
}
.active {
  box-shadow: 0px 0px 10px red;
}
.icon-active {
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 0;
  right: 48px;
  background: red;
  color: #fff;
  font-size: 25px;
  z-index: 9999;
  border-bottom-right-radius: 6px;
}
.success_circle {
  display: inline-block;
  margin-right: 8px;
  width: 6px;
  height: 6px;
  background: #14CE67;
  border-radius: 50%;
}
.error_circle {
  display: inline-block;
  margin-right: 8px;
  width: 6px;
  height: 6px;
  background: #FF3434;
  border-radius: 50%;
}
</style>

